<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>树形下拉选择器</title>

		<link rel="stylesheet" href="zTree_v3-master/css/metroStyle/metroGreen.css" type="text/css">
		<link rel="stylesheet" href="layui/css/layui.css" media="all">

		<script src="layui/layui.js"></script>
		<script src="module/common.js"></script>
	</head>

	<body style="padding: 25px;">
		<div class="layui-container layui-form">
			<div class="layui-form-item">
				<label for="" class="layui-form-label">测试</label>
				<div class="layui-input-block">
					<input type="text" id="tree" value="1,2" lay-filter="tree" class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label for="" class="layui-form-label">测试2</label>
				<div class="layui-input-block">
					<input type="text" id="tree2" value="" lay-filter="tree2" class="layui-input">
				</div>
			</div>
		</div>

		<script>
			layui.use(['treeSelect', 'form'], function() {
				var setting = {
					view: {
						selectedMulti: true
					},
					check: {
						enable: true
					},
					data: {
						simpleData: {
							enable: true,
							idKey: "id",
							pIdKey: "pId",
							rootPId: 0
						}
					},

				}
				var treeSelect = layui.treeSelect;
				treeSelect.render({
					// 选择器
					elem: '#tree',
					// 数据
					data: 'data/data3.json',
					// 异步加载方式：get/post，默认get
					type: 'get',
					// 占位符
					placeholder: '请输入搜索关键字',
					// 是否开启搜索功能：true/false，默认false
					search: true,
					setting: setting,
					// 点击回调
					click: function(d) {
						console.log(d.current.id);
						document.getElementById("tree").value = d.current.id;
					},
					check: function(d) {
						var value = "";
						for (var i = 0; i < d.current.length; i++) {
							value += d.current[i].id;
							if (i < d.current.length - 1) {
								value += ","
							}
						}
						document.getElementById("tree").value = value;

					},
					// 加载完成后的回调函数
					success: function(d) {
						console.log(d);
						//                选中节点，根据id筛选
						//                treeSelect.checkNode('tree', 3);

						//                获取zTree对象，可以调用zTree方法
						//                var treeObj = treeSelect.zTree('tree');
						//                console.log(treeObj);

						//                刷新树结构
						//                treeSelect.refresh();
					}
				});

				treeSelect.render({
					// 选择器
					elem: '#tree2',
					// 数据
					data: 'data/data3.json',
					// 异步加载方式：get/post，默认get
					type: 'get',
					// 占位符
					placeholder: '占位符',
					// 是否开启搜索功能：true/false，默认false
					search: true,
					setting: setting, //ztree格式设置
					// 点击回调
					click: function(d) {
						console.log(d.current.id);
					},
					check: function(d) {
						console.log(d);
					},
					// 加载完成后的回调函数
					success: function(d) {
						console.log(d);
						//                选中节点，根据id筛选
						//                treeSelect.checkNode('tree', 3);

						//                获取zTree对象，可以调用zTree方法
						//                var treeObj = treeSelect.zTree('tree');
						//                console.log(treeObj);

						//                刷新树结构
						//                treeSelect.refresh();
					}
				});

			});
		</script>
	</body>

</html>